.dialogs-container {
  padding: 24px;
  
  h1 {
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 500;
  }

  .description {
    margin: 0 0 32px 0;
    color: rgba(0, 0, 0, 0.6);
  }

  .demo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;

    .demo-card {
      mat-card-content {
        padding: 16px;
        
        p {
          margin-bottom: 16px;
          color: rgba(0, 0, 0, 0.7);
        }

        button {
          width: 100%;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .demo-cards {
      grid-template-columns: 1fr;
    }
  }
}
